<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-28 16:22:40
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-27 16:10:19
 * @Description: file content
-->
<template>
  <div>
    <el-row class="setting-item">
      <el-col :span="3">
        <span class="setting-name">
          {{ getGroupName('ORGANIZATION') }}
        </span>
      </el-col>
      <el-col :span="20">
        <OrganizationVisibilityRange
          :key="'ORGANIZATION_' + group.id"
          v-bind="{ group }"
          :selectItems="organizationGroup"
          @add="getGroupComps()"
          @delete="(id) => handleCompDelete(id)"
        />
      </el-col>
    </el-row>
    <el-row class="setting-item">
      <el-col :span="3">
        <span class="setting-name">
          {{ getGroupName('BUSINESS_MODEL') }}
        </span>
      </el-col>
      <el-col :span="20">
        <div
          style="display: inline-block"
          v-for="comp in groupComps['BUSINESS_MODEL']"
          :key="comp.id"
        >
          <component
            :is="!!comp.businessType ? 'ModuleRag' : 'ReportVisibilityRange'"
            v-bind="{ group, component: comp }"
            :model-item="comp"
          >
            <el-tag
              class="name-tag"
              size="medium"
              closable
              type="info"
              @close="handleCompDelete(comp.id)"
            >{{ comp.title }}</el-tag
            >
          </component>
        </div>
        <i
          style="vertical-align: text-top"
          class="el-icon-plus btn-icon"
          @click="handleCompAdd"
        ></i>
      </el-col>
    </el-row>
    <el-row class="setting-item">
      <el-col :span="3">
        <span class="setting-name">
          {{ getGroupName('REPORT') }}
        </span>
      </el-col>
      <el-col :span="20">
        <ReportVisibilityRange :key="'REPORT_' + group.id" v-bind="{ group }">
        </ReportVisibilityRange>
      </el-col>
    </el-row>
    <!--    选择模型-->
    <RangeSelect :title="title" ref="RangeSelect" :components="validComps" />
  </div>
</template>

<script>
import { getHmusergroupcomponentList,getHmusergroupcomponentSelectlist,postHmusergroupcomponent,deleteHmusergroupcomponent } from '@/apis/paas/HmUserGroupComponentController.js'
import RangeSelect from './RangeSelect'
import ReportVisibilityRange from './visible/ReportVisibilityRange'
import OrganizationVisibilityRange from './visible/OrganizationVisibilityRange'

import ModuleRag from './visible/ModuleRag'

export default {
  name: 'RangeList',
  components: {
    RangeSelect,
    ReportVisibilityRange,
    OrganizationVisibilityRange,
    ModuleRag
  },
  props: {
    group: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: [String, Number],
      default: ''
    },
    moduleType: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      reportRangeList: [], // 所有的报表list
      reportGroup: [],
      businessModelGroup: [],
      organizationGroup: [],
      groupComps: [], // 用户组已添加组件
      components: [] // 用户组所有可添加组件
    }
  },

  computed: {
    validComps () {
      const groupCompIds = this.businessModelGroup.map(
        (item) => item.componentId
      )
      return this.components.filter((item) => !groupCompIds.includes(item.id))
    }
  },

  watch: {
    'group.id': {
      handler: function () {
        this.getGroupComps()
      },
      immediate: true
    }
  },

  methods: {
    // 获取数据权限数据
    getGroupComps () {
      if (this.group.isRoot) {
        return
      }
      getHmusergroupcomponentList({
        type: this.type,
        userGroupId: this.group.id
      }).then((res) => {
        this.reportGroup = res.REPORT || []
        this.businessModelGroup = res.BUSINESS_MODEL || []
        this.organizationGroup = res.ORGANIZATION || []
        this.groupComps = res
      })
    },

    handleCompAdd () {
      if (this.group.isRoot) {
        return
      }
      // 获取设置权限的模型
      getHmusergroupcomponentSelectlist({
        // type: this.moduleType,
        groupId: this.group.id
      }).then((res) => {
        this.components = res
      })

      this.$refs.RangeSelect.open(null, (data) => {
        postHmusergroupcomponent({
          type: this.type,
          userGroupId: this.group.id,
          components: data
        }).then((res) => {
          this.$message.success(this.$t('sys.operation_success'))
          this.getGroupComps()
        })
      })
    },
    handleCompDelete (id) {
      deleteHmusergroupcomponent({ id }).then((res) => {
        this.$message.success(this.$t('sys.operation_success'))
        this.getGroupComps()
      })
    },
    getGroupName (key) {
      if (key === 'REPORT') {
        return this.$t('sys.statistical_report')
      } else if (key === 'BUSINESS_MODEL') {
        return this.$t('sys.business_model')
      } else if (key === 'ORGANIZATION') {
        return this.$t('sys.organizational_structure')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ccc;
  display: flex;
  align-items: center;
  min-height: 70px;
}
.el-icon-close {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
}
.btn-icon {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
}
.comp-title {
  display: flex;
  align-items: center;

  &_text {
    font-weight: bold;
    margin-left: 10px;
    margin-right: 20px;
  }
}
</style>
